<template>
	<view class="content">
		<view class="u-flex user-box u-p-l-30 u-p-r-20 u-p-b-30">
			<view class="u-m-r-10"><u-avatar :src="pic" size="140"></u-avatar></view>
			<view class="u-flex-1">
				<view class="u-font-18 u-p-b-20">{{ userInfo.name }}</view>
			</view>
			<view class="u-m-l-10 u-p-10"><u-icon name="scan" color="#969799" size="28"></u-icon></view>
			<view class="u-m-l-10 u-p-10"><u-icon name="arrow-right" color="#969799" size="28"></u-icon></view>
		</view>

		<view class="u-m-t-20">
			<u-cell-group><u-cell-item icon="rmb-circle" title="支付"></u-cell-item></u-cell-group>
		</view>

		<view class="u-m-t-20">
			<u-cell-group>
				<u-cell-item icon="star" title="收藏"></u-cell-item>
				<u-cell-item icon="photo" title="相册"></u-cell-item>
				<u-cell-item icon="coupon" title="卡券"></u-cell-item>
				<u-cell-item icon="heart" title="关注"></u-cell-item>
			</u-cell-group>
		</view>

		<view class="u-m-t-20">
			<u-cell-group>
				<u-cell-item icon="setting" title="设置"></u-cell-item>
				<u-cell-item title="退出登录" @click="bindLogout"></u-cell-item>
			</u-cell-group>
		</view>
	</view>
</template>

<script>

	import { mapState } from 'vuex'

export default {
	data() {
		return {
			pic: 'https://imgsa.baidu.com/forum/pic/item/2f9abdec8a13632792d21683988fa0ec08fac70d.jpg',
			show: true
		};
	},
	computed:{
		...mapState({
			 userInfo: state => state.user.userInfo
		})
	},
	onLoad() {},
	methods: {
		bindLogout() {
			this.$store.dispatch('user/logout');
			/**
			 * 如果需要强制登录跳转回登录页面
			 */
			if (this.forcedLogin) {
				uni.reLaunch({
					url: '../login/login'
				});
			}
		}
	}
};
</script>

<style lang="scss">
page {
	background-color: #ededed;
}
.content {
	padding: 20rpx;
}
.camera {
	width: 54px;
	height: 44px;

	&:active {
		background-color: #ededed;
	}
}
.user-box {
	background-color: #fff;
}
</style>
